<template>
  <ul class="article-list">
    <li v-for="item of postlist" :key="item.id">
      <van-skeleton title avatar :row="3" :loading="loading">
        <div class="msg-contain">
          <img :src="item.img" class="msg-avatar" @click="$router.push({ name: 'stranger' })"/>
          <div class="msg-box">
            <h3>{{ item.nickname }}</h3>
            <span class="msg-time">{{ item.time }}</span>
            <p>{{ item.text }}</p>
            <!-- 多个图片情况另论  图片尺寸待优化 -->
            <img :src="item.containImg" />
            <div><span class="msg-type"><i>#</i>{{ item.type }}</span></div>
            <div class="msg-options">
              <div class="msg-options-type">
                <img src="@/assets/img/fenxiang.png" @click="showShareFn(item)" />
                <span>{{ item.zf }}</span>
              </div>
              <div class="msg-options-type">
                <img src="@/assets/img/pinglun.png" @click="goComment()" />
                <span>{{ item.pl }}</span>
              </div>
              <div class="msg-options-type" v-if="item.xz === 1">
                <img @click="changeLove(item)" style="width: 0.185rem; height: 0.185rem;" src="@/assets/img/dianzanxuanzhong.png" />
                <span style="color: #E60000">{{ item.dz }}</span>
              </div>
              <div class="msg-options-type" v-else>
                <img @click="changeLove(item)" src="@/assets/img/dianzan.png" style="margin-right: 0.017rem" />
                <span>{{ item.dz }}</span>
              </div>
            </div>
            <span @click="attentionFn(item)" v-show="postType === 'unconcerned'" :class="item.gz === 1 ? 'postType' : 'postType unconcerned'">
              <i v-show="item.gz !== 1" style="font-size: 0.17rem;">+</i>{{ item.gz === 1 ? '已关注' : '关注' }}
            </span>
          </div>
        </div>
      </van-skeleton>
    </li>
    <van-share-sheet
      v-model="showShare"
      :options="options"
      @select="selectShareFn($event)"
    />
  </ul>
</template>

<script>
import Vue from 'vue'
import { Skeleton, ShareSheet, Toast } from 'vant'
Vue.use(Skeleton)
Vue.use(ShareSheet)
Vue.use(Toast)

export default {
  props: {
    goComment: {
      type: Function,
      default () { return null }
    },
    postlist: {
      type: Array,
      default () {
        return []
      }
    },
    loading: {
      type: Boolean,
      default: true
    },
    postType: {
      type: String,
      default: 'attention'
    }
  },
  data () {
    return {
      showShare: false,
      options: [
        [
          { name: '微信', icon: require('@/assets/img/weixin.png') },
          { name: '朋友圈', icon: require('@/assets/img/pengyouquan.png') },
          { name: 'QQ', icon: require('@/assets/img/qq.png') },
          { name: 'QQ空间', icon: require('@/assets/img/qqkongjian.png') },
          { name: '新浪微博', icon: require('@/assets/img/weibo.png') }
        ],
        [
          { name: '收藏', icon: require('@/assets/img/shoucang.png') },
          { name: '举报', icon: require('@/assets/img/jubao.png') },
          { name: '复制链接', icon: require('@/assets/img/fuzhilianjie.png') }
        ]
      ]
    }
  },
  methods: {
    attentionFn (item) {
      // 发请求 关注/取消关注
      Toast('关注成功')
      item.gz = item.gz === 1 ? 0 : 1
    },
    selectShareFn (opt) {
      if (opt.name === '收藏' || opt.name === '已收藏') {
        opt.name = opt.name === '收藏' ? '已收藏' : '收藏'
        // 发起请求 添加/取消 收藏
      }
    },
    changeLove (item) {
      item.dz = item.xz === 1 ? item.dz - 1 : item.dz + 1
      item.xz = item.xz === 1 ? 0 : 1
      // 发请求
    },
    showShareFn (item) {
      // 发请求判断是否收藏
      this.options[1][0].name = item.sc === 1 ? '已收藏' : '收藏'
      this.showShare = true
    }
  }
}
</script>

<style lang="sass" scoped>
@import '@/assets/css/community/postlist.scss';
</style>
